﻿@{
    ViewBag.Title = "上传图像";
    Layout = "~/Areas/Member/Views/Shared/_Layout.cshtml";
}
<link rel="stylesheet" type="text/css" href="@ViewBag.OssUrl/front/webuploader/webuploader.css">

<style type="text/css">
    .webuploader-pick, .webuploader-pick-hover {
        background-color: #009688;
        height: 38px;
        padding: 0px;
    }
</style>
<div class="myMenu">
    <div class="menu_left"><div class="here w1200"><a href="/Member/Home">首页</a>&nbsp;&gt;&gt;&nbsp;我的头像</div></div>
</div>
<div class="layui-my-content">
    <div class="layui-form layui-form-pane layui-tab-item layui-show">
        <blockquote class="layui-elem-quote layui-text">
            建议尺寸256*256，支持jpg、png、gif
        </blockquote>
        <div class="layui-form-item">
            <div class="avatar-add">
                <img src="@ViewBag.Avatar" id="Avatar" style="width:200px;height:200px;display:block; clear:both;clear:both;top:32%;left:44%" />
                <div style="position:absolute;clear:both; top:70%;left:20%;">
                    <button type="button" class="layui-btn upload-img" id="upload_img" style="overflow:hidden;margin-top:20px;margin-left:48px;">
                        <i class="layui-icon layui-icon-download"></i>上传头像
                    </button>
                </div>

                <input class="layui-upload-file" type="file" name="file" />
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="@ViewBag.OssUrl/front/webuploader/webuploader.js"></script>
<script type="text/javascript" src="~@ViewBag.OssUrl/front/js/common.js"></script>
<script type="text/javascript">
    layui.use(['layer', 'laypage', 'element'], function () {
        var layer = layui.layer;
        var laypage = layui.laypage;
    });
    var singleImageUpload = WebUploader.create({
        swf: '/Content/webuploader/Uploader.swf',
        fileVal: 'file',
        duplicate: true,
        server: oss_Host,         
        pick: { id: '#upload_img', multiple: false },
        accept: {
            title: 'Images',
            extensions: 'jpg,jpeg,png',
            mimeTypes: 'image/jpg,image/jpeg,image/png'
        },
        method: 'POST',
        threads: 1,
        resize: false,
        chunked: false,
        auto: true
    });
    singleImageUpload.on('beforeFileQueued', function (file) {
        $.ajaxSettings.async = false;         
        $.getJSON("/Home/GetOssSignature", function (res) {
            if (res.State != 200) {
                layer.msg(res.Msg);
                return false;
            }
            else {
                singleImageUpload.formData = {
                    "key": res.Dir + "${filename}",
                    "policy": res.Policy,
                    "OSSAccessKeyId": oss_Accessid,
                    "callback": res.CallbackBody,
                    "success_action_status": "200",
                    "signature": res.Signature,
                };
            }
            $.ajaxSettings.async = true;
        });
    });
    singleImageUpload.on('uploadSuccess', function (file, response) {
        var ext = file.ext.toLowerCase();
        var imageValue = oss_Host + "/" + oss_Dir + file.name;
        $("#Avatar").prop("src", imageValue);
        //更新数据库
        $.getJSON("/Member/Home/UpdateHead?url=" + encodeURIComponent(imageValue), function (data) {
            if (data.State == 200) {
                layer.msg('头像更新成功');
                $("#top_Avatar").prop("src", imageValue + "?x-oss-process=image/resize,m_fill,w_200,h_200,limit_0/auto-orient,0/quality,q_90");
            }
            else {
                layer.msg('头像更新失败');
            }
        });

    });
    singleImageUpload.on('uploadError', function (file) {
        layer.msg("上传失败!");
    });
</script>
